import React, { useEffect, useState } from 'react';
import { Dropdown, Menu, Avatar } from 'antd';
import { withRouter } from 'react-router-dom';
import './index.less'

const HeaderBar = (props) => {
      const [userName, setUserName] = useState('')

      useEffect(() => {
            setUserName(localStorage.getItem('userName'))
      }, [])

      const loginOut = () => {
            props.history.push({ pathname: '/login' });
            localStorage.removeItem("userName");
      }

      let menu = (
            <Menu >
                  <Menu.ItemGroup title="用户中心" >
                        <Menu.Item>个人信息</Menu.Item>
                        <Menu.Item><span onClick={loginOut}>退出登录</span></Menu.Item>
                  </Menu.ItemGroup>
                  <Menu.ItemGroup title="设置中心" >
                        <Menu.Item>个人设置</Menu.Item>
                        <Menu.Item>系统设置</Menu.Item>
                  </Menu.ItemGroup>
            </Menu>
      );
      return (
            <>
                  <Dropdown overlay={menu} placement="bottomLeft">
                        <div className="user">
                              <Avatar src="https://joeschmoe.io/api/v1/random" />
                              <span style={{ marginLeft: '4px' }}>{userName}</span>
                        </div>
                  </Dropdown>
            </>
      )
}

export default withRouter(HeaderBar);